﻿<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="title" content="Google Rebang">
    <meta name="author" content="Vincent Zhou">
    <meta name="creation" content="09/19/2009">
    <title>Google Rebang</title>
    <script>
      var pollInterval = 1000 * 60 * 3;  // 3 minute
      var requestTimeout = 1000 * 10;    // 10 seconds
      var rebang = "";  // The infowindow to be sent to content script.
      var lastPort;

      function init() {
        window.setTimeout(updateRebang, 0);
      }

      function updateRebang() {
        var httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = function() {
          if (httpRequest.readyState == 4 && httpRequest.responseXML) {
            var r = httpRequest.responseXML;
            var items = httpRequest.responseXML.getElementsByTagName("item");
            document.getElementById("topQuery").innerHTML = getToolstripHtml(items[0]);
            rebang = getInfoWindowHtml(items);
          }
        };
        var request = "http://www.google.cn/rebang/xml?bid=12000000";
        httpRequest.open('GET', request, true);
        httpRequest.setRequestHeader("Cache-Control", "no-cache");
        httpRequest.send(null)
        window.setTimeout(updateRebang, pollInterval);
      }

      function getToolstripHtml(item) {
        var query = item.getAttribute("query");
        var url = item.getAttribute("url");
        return "<div onclick=\"gotoLink('" + url + "')\">" + trimString(query, 20) + "</div>";
      }

      function getInfoWindowHtml(items) {
        var h = '\
          <div class="grb_bg_1">\
          <table width="100%" border="0" cellpadding="0" cellspacing="0" class="grb_c grb_bg_2">\
          <tr><td class="grb_BillboardTitle grb_bg_2">上升最快关键词</td></tr>\
          <tr><td class="grb_center grb_bg_2" style="padding:0 1px">\
          <table width="100%" border="0" cellpadding="0" cellspacing="0" class="grb_Billboard">';
        for (var i = 0; i < items.length && i < 8; ++i) {
          var query = items[i].getAttribute("query");
          var url = items[i].getAttribute("url");
          var isNew = items[i].getAttribute("new");
          var trend = items[i].getAttribute("trend");
          h += '<tr><td width="24" class="grb_center grb_f_Ranking">' + (i + 1) + '</td>';
          h += '<td nowrap width="135px"><a class="grb_left" target="_blank" href="http://www.google.cn/search?q='
          h += encodeURIComponent(query) + '">' + trimString(query, 14) + '</a>';
          h += (isNew == 1 ? '<span class="grb_new"></span>' : '') + '</td>';
          h += '<td width="15px" id="q_trend"><div id="';
          h += (trend == 0 ? 'nomove' : trend == 1 ? 'up' : 'down');
          h += '"></div></td></tr>';
        }
        h += '\
          <tr class="grb_right grb_f_Info"><td colspan="3" class="grb_right">\
          <a class="grb_right grb_f_Info" href="http://www.google.cn/rebang/detail?bid=12000000" target="_blank">更多&raquo;</a>\
          </td></tr></table></td></tr></table>\
          <div class="grb_w grb_t"></div/></div></div>'
        return h;
      }

      // Trim the tail of string to the given length. Length of a Chinese
      // character is 2.
      function trimString(s, l) {
        var i = 0, j = 0;
        while (i < s.length) {
          var k = (s.charCodeAt(i) > 255 ? 2 : 1);
          if (j + k > l) break;
          j += k;
          ++i;
        }
        return s.substring(0, i) + (i == s.length ? "" : "...");
      }

      function gotoGoogleRebang() {
        var rebangUrl = "http://www.google.cn/rebang/home";
        gotoLink(rebangUrl);
      }

      function gotoLink(link) {
        hide();
        chrome.tabs.create({url: link});
      }

      function show(event) {
        chrome.tabs.getSelected(null, function(tab) {
          var winX = document.all ? window.screenLeft : window.screenX;
          var anchor = event.screenX - winX;
          var port = chrome.tabs.connect(tab.id, {name: "googleRebang"});
          port.postMessage({message: "show", html: rebang, anchorX: anchor});
          lastPort = port;
        });
      }

      function hide() {
        if (lastPort) {
          lastPort.postMessage({message: "hide"});
        }
      }
    </script>
  </head>
  <body onload="init()" onmouseover="show(event)" onmouseout="hide()">
    <div>
      <img id="icon" src="rebang.png" width="18" height="22" style="margin-right:4px;padding:0px;border:none;" onclick="gotoGoogleRebang()"/>
      <div id="topQuery" style="height:22;display:table-cell;vertical-align:middle;font-size:12px"></div>
    </div>
  </body>
</html>
